<template>
  <div class="follow-view">
    <div class="top">
      <span style="margin-left: 10px">关注</span>
      <div class="switch-btn">
        <span
          :class="{ active: item.id === currentSwitch }"
          @click="switchBtn(item.id)"
          v-for="item in switchData"
          :key="item.id"
          >{{ item.name }}</span
        >
      </div>
    </div>
    <div class="content">
      <el-empty v-if="!DataList.length" description="暂无数据"></el-empty>
      <div v-else class="list">
        <user-info-view
          v-for="(item, index) in DataList"
          :key="index"
          :userData="item"
          :isFollow="loginFollowList.includes(item.userId)"
          @op-follow="Follow($event, item.userId)"
        ></user-info-view>
        <div v-if="loading" class="loading">加载中...</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { getUserId } from "../../../utils/auth";
import { getFollowData } from "../../../api/personal";
import { Follow, cancelFollow } from "../../../api/post";
import UserInfoView from "./UserInfo.vue";
export default {
  components: {
    UserInfoView,
  },
  props: {
    personalId: {
      type: String,
      default: null,
    },
    loginFollowList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // 判断是否有新的数据
      hasMore: true,
      loading: false,
      // 切换的选项
      switchData: [
        { id: 1, name: "关注的用户" },
        { id: 2, name: "粉丝" },
      ],
      // 当前选择的选项
      currentSwitch: 1,
      // 当前用户id
      userId: getUserId(),
      // 数据列表
      DataList: [],
      currentPage: 1, // 关注的分页查询
      pageSize: 10, // 每页的查询条数
    };
  },
  methods: {
    ...mapMutations({
      changeBottom: "scrollBar/changeBottom",
    }),
    // 关注或则取消关注
    Follow(isFollow, followId) {
      if (isFollow) {
        // 取消关注
        cancelFollow(this.userInfo.userId, followId).then((res) => {
          if (res.data.code === 1) {
            this.$message.success("取消关注成功");
            // 向父组件发送去除消息
            this.$emit("removeFollow", followId);
          } else {
            this.$message.error("网络错误");
          }
        });
      } else {
        // 关注
        Follow(this.userInfo.userId, followId).then((res) => {
          if (res.data.code === 1) {
            this.$message.success("关注成功");
            // 向父组件发送增加消息
            this.$emit("addFollow", followId);
          } else {
            this.$message.error("网络错误");
          }
        });
      }
    },
    // 切换按钮
    switchBtn(id) {
      this.currentSwitch = id;
      this.DataList = [];
      this.currentPage = 1;
      this.hasMore = true;
      // 切换按钮后重新加载数据
      this.getData();
    },
    // 滚动条到底部继续加载新数据
    loadMore() {
      this.getData();
      // 重新加载数据结束后，将滚动条是否置地变量置位false
      this.changeBottom();
    },
    // 获取数据关注或则粉丝
    getData() {
      if (!this.hasMore) {
        return;
      }
      this.loading = true;
      getFollowData(
        this.currentSwitch,
        this.personalId,
        this.currentPage,
        this.pageSize
      ).then((res) => {
        if (res.data.code === 1) {
          this.DataList = [...this.DataList, ...res.data.data.rows];
          if (this.DataList.length === res.data.data.total) {
            this.hasMore = false;
          }
          this.currentPage += 1;
        } else {
          this.$message.error("网络错误");
        }
        this.loading = false;
      });
    },
  },
  mounted() {
    this.getData();
  },
  computed: {
    // vuex中滚动条状态变量
    ...mapState({
      isBottom: (state) => state.scrollBar.isBottom,
      userInfo: (state) => state.userInfo.userInfo,
    }),
  },
  watch: {
    // 监听滚动条，当为true，也就是触底执行loadMore()
    isBottom(newVal) {
      if (newVal) {
        this.loadMore(); // 当 isBottom 变为 true 时触发获取数据的函数
      }
    },
  },
};
</script>

<style lang="less" scoped>
.follow-view {
  display: flex;
  flex-direction: column;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    border-bottom: 1px solid #e6e6e6;
    span {
      font-size: 16px;
      font-weight: 700;
    }
    .switch-btn {
      display: flex;
      span {
        color: #72777b;
        font-size: 14px;
        cursor: pointer;
        font-weight: 400;
        &.active {
          color: #000000;
        }
      }
      span:not(:last-child)::after {
        color: #72777b;
        content: "|";
        padding: 0 10px; /* 根据需要调整间距 */
      }
    }
  }
}
</style>